@charset "utf-8";

/**
 * Created by MuMo on 2015年11月26日10:25:13...
 * Ver 1.1 UpdateTime 2015年11月30日14:38:09.
 */

// conmmon setting
$lte7: false;
$placeholder: true #eee !default;
$baseFontFamily: '\5FAE\8F6F\96C5\9ED1','Hiragino Sans GB',tahoma !default;
$textColor: #222 !default;
$bodyBgColor: #f5f5f5 !default;

// import sasscore
@import './sassCore/base';
@import './momo';


.gray{
  color:#888;
}


header{
  .logo{
    line-height: 362px;
  }
  nav{
    // border-bottom: 1px solid #fff;
    // box-shadow: inset 0 -1px #ddd;
    margin-bottom: 10px;
  }
  nav a{
    line-height: 86px;
    font-size: 14px;
    color:#222;
    margin: 0 80px;
    &:hover,
    &:active,
    &:visited,
    &:-webkit-any-link
    {
      text-decoration: none;
      -webkit-appearance:none;
    }
  }
}

footer{
  width:100%;
  height:550px;
  background-color: #222;
  color:#fff;
  text-align: center;
  padding-top: 70px;
  position:relative;

  .dm-td{
    margin-top: 20px;
    dt{
      font-size: 20px;
      small{ color:#888;}
    }
    dd{
      color:#888;
      line-height: 260%;
    }
  }
  .copy{
    font-size: 12px;
    color:#888;
    position:absolute;
    width:100%;
    height:42px;
    line-height: 42px;
    bottom:0;
    text-align: center;
    background: #131313;
  }
}

.content{
  padding-bottom: 148px;
}

.imgbox{
  display: block;
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  @include scale(1);
  @include transition(all 4s cubic-bezier(0, 0.12, 0.56, 0.57));
}
.layler-top{
  width: 100%;
  height: 360px;
  margin-bottom: 48px;
  position:relative;
  &:hover{
    .prev,.next{ @include opacity(70);}
  }
}
.l-tit{
  font-weight: 100;
  font-size: 38px;
  line-height: 130%;
  padding:16px 0;
  position:relative;
  left:-3px;
}
.time{
  font-size: 12px;
  line-height: 130%;
  color:#888;
  display:block;
}

.layler-pro{
  .pro{
    width:(1170px-48*2px)/3;
    height:240px;
    background-color: #fff;
    margin-right: 48px;
    overflow:hidden;
    float:left;
    position:relative;

    &:nth-child(3n){
      margin-right: 0;
    }
    &:hover{
      .imgbox{ @include scale(1.2);}
      .pro-img{ height:60%;}
      .pro-info{
        @include opacity(100);
        bottom:0px;
      }
    }
    .pro-info{
      width:100%;
      height:96px;
      background-color: #fff;
      position:absolute;
      left:0;
      bottom:-96px; 
      z-index: 10;
      @include opacity(0);
      @include transition(all 0.3s ease-in-out);
      
      time{
        margin-left: 24px;
      }
      p{
        font-size: 18px;
        margin-left: 24px;
        padding-top: 24px;
        padding-bottom: 6px;
      }
    }
    .pro-img{
      width:100%;
      height:100%;
      @include transition(all 0.3s ease-in-out);
    }

  }
}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
  background-color: #fff;
  .l-left{  
    width:61.8%;
    height:100%;
    background-color:#ccc;
    overflow: hidden;
    float: left;
  }
  .l-right{
    float: left;
    width:38.2%;
    height:100%;
    background-color: #fff;
    .warp{
      padding:30px;
    }
  }
  &:hover{
    .l-left .imgbox{ @include scale(1.2); }
  }
}

.prev,
.next{
  width:46px;
  height:46px;
  position:absolute;
  top:50%;
  margin-top: -23px;
  z-index: 90;
  cursor:pointer;
  @include opacity(0);
  @include transition(all 0.3s ease-in-out);
  background-image: url();
}
.next{
  background-position: 46px 0;
  right:-26px;
}
.prev{
  left:-26px;
}

.work{
  min-height: 400px;
  padding-bottom: 48px;
  background-image: url();
}

.work-logo{
  width:100%;
  height:220px;
  background-image: url(../images/head.png);
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
  top:-90px;
}

.lor-pin{
  margin-right: -20px;
  margin-left: -20px;
  .pin{
    width:25%;
    float:left;
    img{
      width:100%;
      padding:20px;
      height:auto;
      @include box-sizing();
    }
  }
}